<!--
 * @Author: 徐伟杰
 * @Date: 2022-10-26 11:24:52
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-16 14:32:16
 * @Description: 
 * @Email: 1529315455@qq.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view>
    <action-bar :options="navOptions" />
    <view class="mains">
      <view class="listContainer" v-if="list.length > 0">
        <scroll-view-y @refresh="refresh()" @getMore="getMore()" :pageNo="searchObject.pageNo"
          :pageSize="searchObject.pageSize" :total="total" :height="80">
          <template slot="scrollView_content">
            <view class="box" v-for="(item, index) in list" :key="index">
              <view class="box-left">{{ item.updateTime }}</view>
              <view class="box-right add" v-if="item.operType == '新增'">
                <view class="title">
                  {{ item.operType }} - 【{{ item.type }}】 - 【{{ item.columnComment }}】:
                </view>
                <view class="content">
                  <view class="sp">新增：
                    <view v-if="toView(item.newValue)" class="flex item">
                      <view v-for="(list, i) in tranformImage(item.newValue)" :key="i"
                        @click="ViewImage(item.newValue, i)">
                        <img style="width: 100rpx; height: 100rpx" :src="baseApiUrl + list" alt="">
                      </view>
                    </view>
                    <span v-else>{{ item.newValue }}</span>
                  </view>
                </view>
              </view>
              <view class="box-right change" v-if="item.operType == '修改'">
                <view class="title">
                  {{ item.operType }} - 【{{ item.type }}】 - 【{{ item.columnComment }}】:
                </view>
                <view class="content">
                  <view class="sp">修改前：
                    <view v-if="toView(item.oldValue)" class="flex item">
                      <view v-for="(list, i) in tranformImage(item.oldValue)" :key="i"
                        @click="ViewImage(item.oldValue, i)">
                        <img style="width: 100rpx; height: 100rpx" :src="baseApiUrl + list" alt="">
                      </view>
                    </view>
                    <span v-else>{{ item.oldValue }}</span>
                  </view>
                  <view class="sp">修改后：
                    <view v-if="toView(item.newValue)" class="flex item">
                      <view v-for="(list, i) in tranformImage(item.newValue)" :key="i"
                        @click="ViewImage(item.newValue, i)">
                        <img style="width: 100rpx; height: 100rpx" :src="baseApiUrl + list" alt="">
                      </view>
                    </view>
                    <span v-else>{{ item.newValue }}</span>
                  </view>
                </view>
              </view>
              <view class="box-right delete" v-if="item.operType == '删除'">
                <view class="title">
                  {{ item.operType }} - 【{{ item.type }}】 - 【{{ item.columnComment }}】:
                </view>
                <view class="content">
                  <view class="sp">删除：
                    <view v-if="toView(item.oldValue)" class="flex item">
                      <view v-for="(list, i) in tranformImage(item.oldValue)" :key="i"
                        @click="ViewImage(item.oldValue, i)">
                        <img style="width: 100rpx; height: 100rpx" :src="baseApiUrl + list" alt="">
                      </view>
                    </view>
                    <span v-else>{{ item.oldValue }}</span>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </scroll-view-y>
      </view>
      <no-data v-else text="暂无消息通知"></no-data>
    </view>
  </view>
</template>

<script>
import { baseApiUrl } from "@/config.js";
import ScrollViewY from "@/components/scrollViewY/index.vue";
export default {
  components: {
    ScrollViewY,
  },
  data() {
    return {
      baseApiUrl: baseApiUrl,
      navOptions: {
        // 导航栏配置参数
        left: {
          icon: "back",
        },
        center: {
          title: "修改日志详情",
        },
      },
      searchObject: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 10,
      agencyId: null,
      dataStatus: null,
      list: [],
      loading: false,
    }
  },
  onLoad(e) {
    this.agencyId = e.agencyId
    this.getList();
  },
  //! 提供给组件 下拉刷新上拉加载的 数据获取的方法
  provide() {
    return {
      getData: this.getList,
    };
  },
  methods: {
    getList() {
      let data = {
        agencyId: this.agencyId,
        pageNo: this.searchObject.pageNo,
        pageSize: this.searchObject.pageSize
      }
      return new Promise((resolve, reject) => {
        if (this.loading) reject()

        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });
        this.$store.dispatch('getJournalList', data).then(res => {
          if (res && res.code === 200) {
            this.total = res.data.total;
            this.dataStatus === "刷新"
              ? (this.list = res.data.items)
              : this.list.push(...res.data.items);
            resolve(res.data);
          }
        }).finally(() => {
          this.loading = false
          uni.hideLoading();
        })
      })
    },
    refresh() {
      this.dataStatus = "刷新";
      this.searchObject.pageNo = 1;
    },
    getMore() {
      if (this.searchObject.pageNo * this.searchObject.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.searchObject.pageNo++;
      }
    },
    toView(val) {
      if (val) {
        return val.indexOf('jpg') != '-1' || val.indexOf('png') != '-1'
      } else {
        return false
      }
    },
    tranformImage(list) {
      if (list) return list.split(',')
    },
    // 对预览图片路径进行处理
    getImgUrl(url) {
      if (url) {
        if (url.indexOf('http') < 0) {
          url = this.baseApiUrl + url;
        }
        url = url.replace(/\\/g, '/');
        return encodeURI(url);
      } else {
        return url;
      }
    },
    // 预览图片
    ViewImage(url, i) {
      if (url) {
        var path = url.split(',');
        path = path.map(item => {
          return this.getImgUrl(item);
        });
        uni.previewImage({
          urls: path,
          current: i
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mains {
  min-height: calc(100vh - 80rpx);
  background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;
}

.box {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: calc(100% - 40rpx);
  margin: 0 auto 24rpx;


  &-left {
    width: 180rpx;
    font-size: 24rpx;
    color: #222222;
    line-height: 40rpx;
  }

  &-right {
    width: calc(100% - 200rpx);
    margin-left: 20rpx;
    min-height: 366rpx;
    background: linear-gradient(180deg, #FFEEEC 0%, #FFFFFF 7%, #FFFFFF 100%);
    border-radius: 13rpx;
    padding: 40rpx 30rpx;
    position: relative;

    &:after {
      content: "";
      left: 0;
      top: 25%;
      position: absolute;
      width: 8rpx;
      height: 50%;
      border-radius: 0 20rpx 0 20rpx;
    }

    .title {
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 39rpx;
      text-align: left;
    }

    .content {
      margin-top: 20rpx;

      .sp {
        font-size: 24rpx;

        .item {
          margin-top: 10rpx;
        }
      }
    }
  }

  .add {
    &:after {
      background: #FF928A;
    }
  }

  .change {
    &:after {
      background: #FF928A;
    }
  }

  .delete {
    &:after {
      background: #FF928A;
    }
  }
}
</style>